<template>
    <view class="page">
        <!-- 页眉 -->
        <view class="g-header">
            <!-- 分类 -->
            <scroll-view class="g-classify" scroll-x :scroll-left="scrollX" :scroll-with-animation="true">
                <text data-index="0" :class="[0 == nCategoryAct ? 'act' : '']" @tap="toggleClassify" data-id="none">全部</text>
                <text v-for="(item,index) in aCategory" :key="index" :class="[index+1 == nCategoryAct ? 'act' : '']"
                    @tap="toggleClassify" :data-id="item.id" :data-index="index+1">{{item.name}}</text>
            </scroll-view>
        </view>

        <!-- 搜索 -->
        <view class="g-search-wrap">
			<view class="g-sort" @tap="showRule">规则</view>
            <view class="g-search">
                <image src="../../static/icons/search.png" mode="widthFix" @tap="search"></image>
                <input type="text" v-model="sSearchVal" @confirm="search" placeholder="商品名称关键字搜索"/>
            </view>
			<view class="g-sort" @tap="showDrawer">筛选</view>
        </view>
        <!-- 轮播图 -->
        <swiper class="g-banner" indicator-dots autoplay indicator-active-color="#da0000" circular>
            <swiper-item>
                <image src="../../static/icons/ydt/banner1.jpg" mode="widthFix"></image>
            </swiper-item>
            <swiper-item>
                <image src="../../static/icons/ydt/banner2.jpg" mode="widthFix"></image>
            </swiper-item>
            <swiper-item>
                <image src="../../static/icons/ydt/banner3.jpg" mode="widthFix"></image>
            </swiper-item>
        </swiper>
        <!-- 商品列表 -->
        <view class="g-product-list">
            <navigator open-type="navigate" class="g-product" v-for="(item,index) in aProduct" :key="index" 
			:url="'/pages/ydt/product_detail?promotion_id='+id+'&goods_id='+item.goods_id+'&goods_type='+item.goods_type">
                <view class="g-product-pic">
                    <image :src="item.thumb" mode="widthFix" lazy-load></image>
                </view>
                <view class="g-product-info">
                    <view class="u-product-name">{{item.goods_name}}</view>
                    <view class="g-progress-wrap">
                        <view class="g-progress-bg">
                            <view class="g-progress-line" :style="{width: item.buy_bili+'%'}"></view>
                        </view>
                        <text>{{item.buy_bili}}%</text>
                    </view>
                    <text class="g-price"><text>活动预订价</text><text>￥</text>{{item.shop_price}}</text>
                    <view class="g-remain">剩余{{item.sy_buy_num}}人</view>
                </view>
				
				<image class="u-product-sign" :src="id == 1 ? '../../static/icons/ydt/product8.png' : '../../static/icons/ydt/product_free.png' " mode="widthFix"></image>
            </navigator>
        </view>
        
		<!-- 筛选 -->
		<uni-drawer :visible="showRigth" mode="right" @close="closeDrawer">
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="text">价格区间：</view>
					<view class="g-input">
						<input type="number" v-model="shop_price1" placeholder="最低价"><text class="line"></text>
						<input type="number" v-model="shop_price2" placeholder="最高价">
					</view>
				</view>
				<view class="uni-list-cell">
					<view class="text">按类型排序：</view>
					<view class="g-input">
						<button v-for="(item,index) in classList" :key="index" @tap="getClassType(index)" :class="classTpye == index ? 'on':''">{{item}}</button>
					</view>
				</view>
				<view class="uni-list-cell">
					<view class="text">排序：</view>
					<view class="g-input">
						<button @tap="getClassType('desc')" :class="classText == 'desc' ? 'on':''">由大到小</button>
						<button @tap="getClassType('asc')" :class="classText == 'asc' ? 'on':''">由小到大</button>
					</view>
				</view>
			</view>
			<view class="uni-common-button">
				<view class="common-button" @tap="reset">重置</view>
				<view class="common-button sure" @tap="confirm">确认</view>
			</view>
		</uni-drawer>
		<!-- 拼购规则弹框 -->
		<view class="rule-mark" v-if="ruleShow" @touchmove.stop=""  @tap="showRule"></view>
		<view class="g-popup-rule" v-if="ruleShow" @touchmove.stop="">
		    <!-- <view>规则玩法</view> -->
			<view v-html="ruleData.content"></view>
		   <!-- <text>1.选择心仪商品，支付对应份数订金抢{{id==1?'八折':'免费'}}，每期可买多份；</text>
		    <text>2.每期满20份公布，份份有折，其中一份更低至{{id==1?'八折':'免费'}}！</text>
		    <text>3.针对最优惠的一份，用户可委托公司代售，以商品价的20%回收货品；</text>
		    <text>4.公布后拼购的每份商品都可选择折扣取货，不选取则将活动订金全额退回；</text>
		    <text>5.如10天内商品拼购未满份数，本期活动作废，活动订金次日全额退回；</text> -->
		    <view class="g-popup-close" @tap="showRule">
		        <close size="40" color="#fff"></close>
		    </view>
		</view>
		<view class="m-loading" v-if="bIsShowLoading">
		    <image src="../../static/images/loading.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
		<image class="u-to-top" v-if="bIsShowTop" src="../../static/images/to_top.png" mode="widthFix" @tap="toTop"></image>
    </view>
</template>
<script>
	import henglang from '@/common/common.js';
    export default {
        data() {
            return {
                nStatusbarHeight: 0,
                nCategoryAct: 0,
                id: 0, // 商城id
                typeId: 'none', // 分类id
                page: 1,
                aCategory: [],
                scrollX: 0,
                bIsShowLoading: false,
                aProduct: [], // 商品
                sSearchVal: '',
				showRigth: false,
				shop_price1: '',
				shop_price2: '',
				order: '',
				ssort:'',
				bIsShowTop:false,
				totalPages: 1,
				ruleShow: false,
				classList:['团购','价格'],
				classTpye:'',
				classText:'desc',
				ruleData:''
            };
        },
        methods: {
			getList(type){
				let that = this;
				let sendData = {
					promotion_id: this.promotion_id,
					page: this.page,
					goods_name: this.sSearchVal,
					cate_id: this.typeId == 'none' ? '' : this.typeId,
					shop_price1: this.shop_price1,
					shop_price2: this.shop_price2,
					order: this.order,
					sort: this.ssort
				}
				if(this.order) sendData.order = this.order;
				if(that.page <= that.totalPages){
					henglang.get('promotion/getPromotionGoods',sendData,false,function(res){
						that.bIsShowLoading = false;
						if (!res.data.data.length) {
							that.aProduct = ''
							henglang.showToast('暂无数据',1000)
							return false;
						}
						
						if (type == "plus") { // 上拉加载
							that.aProduct = that.aProduct.concat(res.data.data);
						} else {
							that.aProduct = res.data.data;
							that.totalPages = res.data.total_pages;
							uni.stopPullDownRefresh();
						}
					});
				}else{
					that.bIsShowLoading = false
				}
			},
            search() { // 搜索
                this.page = 1;
                this.bIsShowLoading = true;
                this.getList();
            },
            toTop() {
                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 100
                });
            },
            toggleClassify(e) { // 切换分类
                let {index,id} = e.currentTarget.dataset;
                let offset = (index - 2) * (this.width / 5);
                this.nCategoryAct = index;
                this.typeId = id;
                this.scrollX = offset;
                this.bIsShowLoading = true;
                this.page = 1;
                this.sSearchVal = '';
                this.getList();
                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 0
                });
            },
            back() {
                uni.navigateBack();
            },
			showDrawer() {
				this.showRigth = true;
			},
			closeDrawer() {
				this.showRigth = false;
			},
			getClassType(e){
				switch (e){
					case 0:
						this.classTpye = e;
						this.ssort = 'team.has_buy_num'
						break;
					case 1:
						this.classTpye = e;
						this.ssort = 'promotion_goods.shop_price'
						break;
					case 'desc':
						this.classText = this.order = 'desc';
						break;
					case 'asc':
						this.classText = this.order = 'asc';
						break;
					default:
						break;
				}
			},
			confirm() {
				this.page = 1;
				if(Number(this.shop_price1) > Number(this.shop_price2)){
					henglang.showToast('请输入正确的价格范围',1000)
				}else{
					this.shop_price1 = this.shop_price1;
					this.shop_price2 = this.shop_price2;
					this.getList();
					this.showRigth = false;
				}
				
			},
			reset() {
				this.shop_price1 = '';
				this.shop_price2 = '';
				this.order = 'desc',
				this.ssort = 'team.has_buy_num',
				this.classText = 'desc';
				this.classTpye = 0;
			},
			showRule() {
				this.ruleShow = !this.ruleShow;
			}
			
        },
        onReady() {
            let that = this;
            uni.getSystemInfo({
                success(res) {
                    that.nStatusbarHeight = res.statusBarHeight;
                    that.width = res.screenWidth;
                }
            });
            this.bIsShowLoading = true;
			this.order = 'desc',
			this.ssort = 'team.has_buy_num',
            this.getList();
        },
        onLoad({promotion_id}) {
            let that = this;
            that.promotion_id = promotion_id;
			that.id = promotion_id;
            henglang.get('promotion/getPromotionGoodsCategory',{promotion_id: promotion_id},false,function(res){
				that.aCategory = res.data.data;
            });
            uni.setNavigationBarTitle({
                title: promotion_id == 1 ? '全店八折' : '免费购物'
            })
			henglang.get('pawn/bookRule',{type: 3},false,function(res){
				that.ruleData = res.data.data;
			});
        },
        onPullDownRefresh() {
            this.bIsShowLoading = true;
            this.getList();
        },
        onReachBottom() {
            this.bIsShowLoading = true;
            this.page = ++this.page;
            this.getList('plus');
        },
        onNavigationBarButtonTap(e) {
            if (e.index == 0) {
                uni.navigateTo({
                    url: '/pages/user/user_index?type=ydt'
                })
            }
        },
        onPageScroll({scrollTop}) {
            if (scrollTop >= 100) {
                this.bIsShowTop = true;
            } else {
                this.bIsShowTop = false;
            }
        }
    }
</script>
<style>
    image {
        display: block;
    }
    .page {
        background: #fff;
    }
    .g-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: #fff;
        z-index: 9;
        height: auto;
        line-height: 1.5;
		/* #ifdef H5 */
		margin-top: 44px;
		/* #endif */
    }
    /* 分类 */
    .g-classify {
        white-space: nowrap;
        font-size: 14px;
    }
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    .g-classify text {
        display: inline-block;
        text-align: center;
        width: 152upx;
        color: #6c6c6c;
        font-size: 14px;
    }
    .g-classify .act {
        color: #d71311;
        border-bottom: 2px solid #d71311;
    }
    /* 搜索 */
    .g-search-wrap {
        display: flex;
        align-items: center;
        margin: 10px 0;
        margin-top: 35px;
    }
    .u-classify {
        width: 20px;
        margin-right: 10px;
    }
    .g-search {
        flex: 1;
        height: 30px;
        background: #f5f5f5;
        border-radius: 100px;
        display: flex;
        align-items: center;
    }
    .g-search image {
        width: 20px;
        margin-left: 10px;
    }
    .g-search input {
        padding-left: 10px;
        width: 100%;
    }
    .g-banner {
        height: 290upx
    }
    .g-banner image {
        width: 100%;
    }
	.g-sort{
		padding: 0 30upx;
	}
    /* 商品列表 */
    .g-product-list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 5px;
        background: #f5f5f5;
    }
    .g-product {
        width: 360upx;
        position: relative;
        margin-bottom: 5px;
    }
    .g-product-pic {
        width: 360upx;
        height: 360upx;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .g-product-pic image {
        width: 100%
    }
    .g-product-info {
        padding: 5px;
		background: #ffffff;
    }
    .u-product-name {
        display: -webkit-box;
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        min-height: 80upx;
		line-height: 40upx;
    }
    .g-progress-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 5px 0;
        color: #d71311;
    }
    .g-progress-bg {
        width: 80%;
        height: 10px;
        border-radius: 100px;
        background: #fdd0d0;
    }
    .g-progress-line {
        width: 50%;
        height: 100%;
        background: #d71311;
        border-radius: 100px;
    }
    .g-price {
        font-size: 36upx;
        color: #fe0000;
        margin-right: 5px;
        display: inline-flex;
    }
    .g-price text {
        font-size: 24upx;
    }
    .g-remain {
        color: #828080;
        font-size: 24upx;
		padding-bottom: 5upx;
    }
	.activity-price{
		color: #fe0000;
		font-size: 24upx;
		background: #ffffff;
		padding-left: 14upx;
		margin-top: -10upx;
		padding-bottom: 15upx;
	}
    .u-user {
        width: 40upx;
        height: 40upx;
        border-radius: 100px;
        position: absolute;
        right: 5px;
        bottom: 6px;
        border: 1px solid #fff;
    }
    .u-user2 {
        right: 24upx;
        z-index: 2;
    }
    .u-dot {
        width: 5px;
        height: 5px;
        background: #d71311;
        border-radius: 100px;
        position: absolute;
        right: 5px;
        top: 10px;
    }
    .u-to-top {
        position: fixed;
        right: 10px;
        bottom: 60px;
        width: 100upx;
        height: 100upx;
		z-index: 99;
    }
	.u-product-sign {
	    position: absolute;
	    top: 5px;
	    left: 5px;
	    width: 75upx;
		height: 75upx;
	}
/* 筛选 */
	.uni-list{
		padding: 20upx;
	}
	.uni-list-cell{ 
		margin-bottom: 30upx;
	}
	.uni-list-cell .g-input{
		display: flex;
		align-items: center;
	}
	.uni-list-cell .g-input input{
		flex: 1;
		border: 1px solid #cccccc;
		text-align: center;
		border-radius: 10upx;
		padding: 7upx 0;
		font-size: 32upx;
	}
	.uni-list-cell .g-input .line{
		width: 3%;
		height: 2px;
		background: #000000;
		margin: 0 20upx;
	}
	.uni-list-cell .text{
		padding: 15upx 0;
		font-size: 32upx;
	}
	.uni-common-button{
		position: absolute;
		bottom: 0;
		width: 100%;
		left: 0upx;
		text-align: center;
		background: #000000;
		color: #ffffff;
		font-size: 32upx;
		display: flex;
		align-items: center;
	}
	.uni-common-button .common-button{
		flex: 1;
		padding: 30upx 0;
	}
	.uni-common-button .sure{
		background: #D71511;
	}
	.uni-list-cell .g-input button{
		flex: 1;
		border: 1px solid #cccccc;
		padding: 7upx 25upx;
		margin-right: 30upx;
		margin-bottom: 10upx;
		border-radius: 10upx;
		color: #999999;
		font-size: 32upx;
		
	}
	.uni-list-cell .g-input .on{
		color: #ffffff !important;
		background-color: #d71311 !important;
		border-color: #d71311 !important;
	}
	/* 规则弹框 */
	.rule-mark{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: rgba(0,0,0,.5);
		height: 100%;
	}
	.g-popup-rule {
	    position: fixed;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    background: #fff;
	    border-radius: 5px;
	    width: 70%;
	    padding: 20px;
	    z-index: 100;
	    transition: .3s;
	}
	
	.g-popup-rule>view {
	    padding-left: 10px;
	    margin-bottom: 10px;
	}
	
	.g-popup-rule text {
	    display: block;
	}
	
	.g-popup-rule::after {
	    content: '';
	    display: block;
	    width: 3px;
	    height: 15px;
	    background: #d71311;
	    position: absolute;
	    top: 21px;
	    left: 10px;
	}
	
	.g-popup-rule .g-popup-close {
	    padding: 5px;
	    border-radius: 100px;
	    border: 3px solid #fff;
	    position: absolute;
	    bottom: -60px;
	    left: 50%;
	    transform: translateX(-50%);
	}
</style>
